---
slug: ../../Input
---

import Basic from "../../../_samples/main/Input/Basic/Basic.md";
import Suggestions from "../../../_samples/main/Input/Suggestions/Suggestions.md";
import ClearIcon from "../../../_samples/main/Input/ClearIcon/ClearIcon.md";
import SuggestionsWrapping from "../../../_samples/main/Input/SuggestionsWrapping/SuggestionsWrapping.md";
import DynamicSuggestions from "../../../_samples/main/Input/DynamicSuggestions/DynamicSuggestions.md";
import ValueStateMessage from "../../../_samples/main/Input/ValueStateMessage/ValueStateMessage.md";
import Label from "../../../_samples/main/Input/Label/Label.md";
import ValueHelpDialog from "../../../_samples/main/Input/ValueHelpDialog/ValueHelpDialog.md";
import CustomSuggestions from "../../../_samples/main/Input/CustomSuggestions/CustomSuggestions.md";
import CustomStyling from "../../../_samples/main/Input/CustomStyling/CustomStyling.md";

<%COMPONENT_OVERVIEW%>

## Basic Sample
<Basic />

<%COMPONENT_METADATA%>

## More Samples

### Clear Icon
The Input can show a clear icon, visble when there is a value, typed by the user.
When pressed, the value gets cleared.

<ClearIcon />

### Input with Suggestions
The Input can show dropdown with suggestions upon user input - see the <b>showSuggestions</b> property for more information.

<Suggestions />

### Suggestions Wrapping
The sample demonstrates how the text of the suggestions wrap when too long.

<SuggestionsWrapping />

### Dynamic Suggestion Control
This sample demonstrates how applications can control when suggestions appear by dynamically toggling the <b>showSuggestions</b> property.
In this example, suggestions are only shown when the user has typed 3 or more characters.

<DynamicSuggestions />

### Input and Label
<Label />

### Value State Message
<ValueStateMessage />

### Value-help Dialog
<ValueHelpDialog />

### Custom Suggestions
<CustomSuggestions />

### Custom Styling
To some extent, the Input allows customization with pure CSS as shown in the sample.

<CustomStyling />
